<template>
  <div id="container">
    <div class="header-content"><a @click="chagneRefresh" href="javascript:void(0);"><img src="../assets/pc-logo.png"
          height="50" /></a></div>
    <div class="body-content">
      <div class="hospital-list" v-for="(item, index) in dataSource" :key="index">
        <div v-if="item">
          <div style="position: sticky; top: 80px; background: #fff; padding-top: 10px;">
            <div class="hospital-img-content" :id="item.hosId">
              <div class="hospital-img"><img :src="item.hosLogo" /></div>
              <div class="hospital-name">{{ item.hosName }}</div>
            </div>
            <div class="department-content">
              <div class="department-item" v-for="(items, indexs) in item.departmentDoctorList"
                :key="items.departmentId">
                <a @click="handleDepartment(indexs, items.departmentId+items.departmentName)"
                  :class="{ active: activeIndex == indexs }">{{ items.departmentName }}</a>
              </div>
            </div>
          </div>
          <div class="doctor-content" v-for="items in item.departmentDoctorList" :key="items.departmentId">
            <h2 :id="items.departmentId+items.departmentName">{{ items.departmentName }}</h2>
            <Card @handleDetails="handleDetails" :departmentName="items.departmentName" :hosLogo="item.hosLogo"
              :hosName="item.hosName" :hosId="item.hosId" :secondDepartmentId="items.departmentId"
              :cardItem="items.doctorList"></Card>
          </div>
        </div>
        <div v-else></div>
      </div>
    </div>

    <div class="hospital-fixed">
      <div v-for="(item, index) in dataSource" :key="item.hosId" @click="handleHospital(index, item.hosId)">
        <a :href="`#${item.hosId}`" :class="{ active: hospitalIndex == index }">{{ item.hosName }}</a>
      </div>
    </div>

    <!-- <div id="bbox" ref="bbox">
      <a-modal centered v-model="isSHowMark" :zIndex="1001" :footer="null" width="280px"
        :getContainer="() => $refs.bbox">
        <template slot="closeIcon">
          <img style="margin-top: -10px; margin-right: -10px" src="../assets/close-icon.png" width="24" />
        </template>
        <div class="RQCode-img">
          <a-spin v-if="imgLoading" />
          <img v-else :src="qrCodeUrl" alt="医生二维码" />
        </div>
        <div class="reservation"><b>微信扫描立即预约</b></div>
        <div class="doctor-name">{{ docName }} {{ jobTitle }}</div>
      </a-modal>
    </div> -->

  </div>
</template>

<script>
import { getList, getQueryQrCode } from "../api/home";
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import { dataSource } from "./mock.js";
import Card from './component/Card'
Vue.use(VueLazyload)
// import ref from 'vue';

// const boxs = ref();
export default {
  name: "home",
  components: {
    Card
  },
  data() {
    return {
      imgLoading: true,
      isSHowMark: false,
      hospitalIndex: 0,
      activeIndex: 0,
      dataSource: [],
      docName: '',
      jobTitle: '',
      qrCodeUrl: '',
    }
  },
  mounted() {
    this.$emit('render-event');
  },
  created() {
    // window.location.hash = '/home'
    // console.log('dataSource', dataSource);
    // this.dataSource = dataSource.result;
    this.getList();
  },
  watch: {
    isSHowMark(value) {
      if (!value) {
        this.docName = '';
        this.jobTitle = '';
        this.qrCodeUrl = '';
      }
    }
  },
  methods: {
    chagneRefresh() {
      window.location.reload()
    },
    handleCLoseRQCode() {
      this.isSHowMark = false;
    },
    handleDoctorDetails() {
      this.$router.push({ name: 'doctorInfo' })
    },
    getList() {
      getList({
      }).then(res => {
        if (res.code === 200) {
          this.dataSource = res.result;
        }
      })
    },

    handleDepartment(indexs, id) {
      console.log(id)
      this.activeIndex = indexs;

      var ids = document.getElementById(id);
      console.log(ids.offsetTop)
      window.scrollTo(0, ids.offsetTop - 260)
    },

    handleHospital(index, hosId) {
      console.log(hosId)
      this.activeIndex = 0;
      this.hospitalIndex = index;

      var hosIds = document.getElementById(hosId);
      console.log(hosIds.offsetTop);
      window.scrollTo(0, hosIds.offsetTop - 20)
    },


    // 关注按钮切换
    changeFollow(data, type) {
      console.log(data)
      this.dataList.forEach(item => {
        if (data.id == item.id) {
          item.isFollow = type
        }
      })
    },

    handleLookQRCode(item) {
      this.isSHowMark = true;
    },

    handleDetails(data, flag) {
      this.imgLoading = true;
      this.docName = data.docName;
      this.jobTitle = data.jobTitle;
      this.isSHowMark = flag;
      getQueryQrCode({
        doctorId: data.id
      }).then(res => {
        if (res.code === 200) {
          console.log('=====', res)
          let image = new Image();
          image.src = res.result.qrCodeUrl;
          // image.onload = function() {
          this.qrCodeUrl = res.result.qrCodeUrl;
          this.imgLoading = false;
          // }

        }
      })
    }

  }
};
</script>
<style scoped>
#container /deep/ .ant-modal-content {
  border-radius: 10px !important;
}
#container >>> .ant-modal-content {
  border-radius: 10px !important;
}
#container >>> .ant-modal {
  border-radius: 10px !important;
}
.mark-content {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0, 0.5);
}
.QRCOde {
  width: 280px;
  height: 275px;
  background: #fff;
  margin: 400px auto 0;
  border-radius: 10px;
}
.close {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-left: 250px;
  cursor: pointer;
}
.RQCode-img {
  width: 170px;
  height: 170px;
  line-height: 170px;
  text-align: center;
  margin: 0px auto 0;
}
.RQCode-img img {
  width: 170px;
  height: 170px;
}
.reservation {
  text-align: center;
  margin: 12px 0 3px;
  color: #000;
  font-weight: bold;
}
.doctor-name {
  text-align: center;
  font-weight: bold;
  color: red;
  margin-bottom: 0px;
}
.hospital-fixed {
  width: 150px;
  padding: 10px 0;
  background: #f7f8fa;
  position: fixed;
  top: 40%;
  text-align: left;
  padding: 10px 10px;
  right: 10px;
  /* line-height: 35px; */
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
}
.hospital-fixed div {
  box-sizing: border-box;
  line-height: 15px;
  margin: 15px 0;
}
.hospital-fixed a {
  color: #323233;
}
#container {
  /* width: 1280px; */
  margin: 0 auto;
  background: #fff;
}
.header-content {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-repeat: no-repeat;
  z-index: 999;
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: 0px 3px 4px 0px rgba(140, 130, 130, 0.09);
  padding-left: 30px;
}
.header-content a {
  cursor: pointer;
}
.body-content {
  width: 1290px;
  /* height: 500px; */
  margin: 80px auto;
}
.hospital-list {
  margin-bottom: 40px;
}
.hospital-img-content {
  height: 50px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 50px;
  overflow: hidden;
}
.hospital-img {
  float: left;
  margin-right: 10px;
}
.hospital-name {
  float: left;
  color: #323233;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
}
.hospital-img-content img {
  width: 50px;
  height: 50px;
}
.department-content {
  overflow: hidden;
  border-bottom: 1px solid #dcdee0;
}
.department-item {
  float: left;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #323233;
  margin-right: 30px;
  box-sizing: border-box;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
}
.department-item a {
  color: #323233;
}
a:hover {
  color: #1971ff;
}
a.active {
  color: #1971ff;
}
.doctor-content {
  overflow: hidden;
  scroll-padding-top: 190px;
}
.doctor-content h2 {
  color: #323233;
  margin-top: 30px;
}
.card {
  width: 420px;
  height: 150px;
  border-radius: 10px;
  background: #f7f8fa;
  margin: 0 10px 10px 0;
  float: left;
  overflow: hidden;
  cursor: pointer;
}
.left-head {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin: 12px 15px 20px;
  border: 1px solid #f8f7fb;
  overflow: hidden;
  background: #fff;
  float: left;
}
.left-head img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.right-content {
  float: left;
  width: 325px;
}
.docName {
  font-weight: bold;
  margin: 12px 0 7px;
  font-size: 16px;
  color: #323233;
}
.label {
  height: 25px;
  overflow: hidden;
  margin-bottom: 5px;
}
.tags {
  padding: 2px 3px;
  border-radius: 5px;
  background: #edf4ff;
  float: left;
  color: red;
  margin-right: 5px;
}
.skill {
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.skill span {
  color: #323233;
  font-weight: bold;
}
</style>
